1. Field of the Invention
The present invention generally relates to computer storage and manipulation of images and, more particularly, to a system and method for overlaying a magnified high resolution portion of an image over a reduced resolution version of the image using a Web browser and preserving contextual information about the image.
2. Background Description
In many applications, high resolution images may be obtained via medical imaging technologies or high resolution optical scanners. These high resolution images may be used to search for features such as tumors, fractures, defects, hidden details or other artifacts. It is often useful to see the whole image, in order to provide context, while viewing a closer, more detailed section of the image. Traditional images viewed in a web browser are stored at a resolution that matches the resolution of the display. Any enlargement of the image reveals no further detail, but rather detracts from the image quality by enlarging individual picture elements, or pixels, to make up for the larger image size.
It is therefore an object of the present invention to provide a system and method of storing and enlarging images to show high resolution details in the images.
Traditional magnification techniques involve positioning a selection box or pointer above the reduced resolution image and clicking to zoom to a higher resolution view of the image. There is no smooth traversal of the image as with moving a traditional magnifying glass over a photograph. This invention more closely models a traditional magnifying glass and allows smooth movement over the image. It also preserves contextual information about the position within the image by overlaying a magnified view of the image over reduced resolution image.
This system and method allows for a viewing of high resolution images in such a way that enlargement of a given section of the image reveals more details because the actual image data is stored at a higher resolution than the display device. The method involves the creation of an ultra-high resolution image via the use of an optical scanner or medical imaging device. This image is stored to a digital media storage device such as the hard disk drive of a computer. Via traditional published methods of resizing a digital image, a reduced resolution image is created from the original, ultra-high resolution image, so that the reduced resolution image matched the resolution of the display device.
The reduced resolution image may now be displayed on the display device using a web browser and requiring no scaling for the image to fit on the display. The ultra-high resolution image may be loaded into the memory of the web browser, but not displayed at this time. An input device, such as a mouse or trackball or touchscreen display, can now be used to traverse over the reduced resolution image. As the reduced resolution image is traversed, the position of the traversal may be determined, as in two dimensional mouse coordinates, and the position relative to the image can be determined as a factor of the actual image dimensions. This two dimensional factor may now be used to determine the position of the traversal in the ultra-high resolution image. A portion of the ultra-high resolution image may now be displayed on top of the reduced resolution image, offset to the mouse or trackball""s current position, at the actual ultra-high resolution, and cropped to a selected display size. Input via another device, such as a keyboard or separate controls, may provide input to the web browser to allow the size of the cropped, ultra-high resolution image to be enlarged or reduced.
In practice, two images are stored, a reduced resolution image which is displayed on the monitor and a larger high resolution image of which portions are displayed. As the cursor is moved about the lower resolution image a box is constantly displaying a portion of the high resolution image. The portion displayed depends upon the location of the cursor. Additionally, the amount of the high resolution image displayed overlaying the low resolution image is set by the user. Basically, the user can move about the low resolution image and zoom in or zoom out on a detail as he or she chooses.